<head th:fragment="headerCss">
    <meta charset="utf-8">
    <title>全国职业院校技能大赛-教师赛</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="keywords" content=""/>
    <meta name="description"
          content="全国职业院校技能大赛-教师赛"/>
    <link rel="stylesheet" href="/js/layui/css/layui.css">
    <!-- Bootstrap CSS File -->
    <link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/examination/common.css">
    <link rel="shortcut icon" href="../../bitbug_favicon.ico">
    <style>
        html{
            height: 100%;
        }
        body{
            background: url("../../img/loginbgs.png") no-repeat;
            background-size: 100% 100%;
            height: 100%;
        }
        .infoBox{
            background: transparent !important;
        }

        .info, .heading , .around{
            width: 90%;
        }
        .around{position: relative}
        .heading{
            margin: 25px auto 0;position: relative;
        }

        .options, .topic{
            width: 78%;
            padding-bottom: 20px;
        }
        .options{
            background: #CBEDFF;
            border-radius: 16px 16px 0 0;
        }
        .options .slogan{
            font-size: 50px;
            font-weight: 500;
        }
        .options .slogan img{
            margin-right: 10px;
        }
        .topic{
            background: #fff;
            border-radius: 0 0 16px 16px;
            padding-bottom: 10%;
        }

        #examShowtime,.sheet{
            width: 22%;
            margin-left: 0;
            position: absolute;
            top: 0px;
            right: 0;
            height:100%;
        }
        #examShowtime{
            margin-left: 24px;
            padding: 0 16px;
            box-sizing: border-box;
            background: rgba(255,255,255,.2);
            border-radius: 24px 24px 24px 24px;
            height: 82px;
            line-height: 70px;
            position: absolute;
            top: 0;
            right: 0;
        }
        #lastEndTime{
            margin-left: 10px;
        }
        .sheet{
            background: #fff;
            border-radius: 16px;
            margin-left: 24px;
            margin-top: -96px;
            height: calc(100vh - 130px) !important;
        }
        
        .marR10 {
            width: 20px;
            height: 20px;
            display: block;
            float: left;
            margin: 2px 10px 0 0;
        }
        .mar10{
            width: 100%;
            margin-top: 40px;
            font-size: 16px;
            display: table;
        }

        .mar10 textarea{
            width: 600px !important;
            padding: 16px;
            box-sizing: border-box;
            text-indent: 2em;
            background: url("../../img/edits.png") left 10px top 10px no-repeat;
            background-size: 24px;
            float: left;
            margin-left: 40px;
        }

        #content{
            width: 100%;
            padding: 0 40px;
            box-sizing: border-box;
        }

        .btnBox, .div-1{
            margin: 0 auto !important;
            justify-content: center;
        }

        label {
            display: block
        }

        a {
            color: #666;
        }

        #layui-layer1 .layui-layer-btn{
            text-align: center;
        }

        #layui-layer1 .layui-layer-btn .layui-layer-btn0{
            background: #FF6A66;
            color: #fff;
            border: none;
            font-size: 14px;
        }

        #layui-layer1 .layui-layer-btn .layui-layer-btn1{
            background: white;
            border:1px solid #FF6A66;
            font-size: 14px;
        }

        .div-1{
            margin: 50px auto;
            width: 200px;
            margin-left: 300px;
        }

        .resourceUrlImg, .resourceUrlVideo{
            width: 1150px;
            margin: 0 auto 30px;
        }
        .resourceUrlImg img, .resourceUrlVideo video{
            width: 100%;
            height: 450px;
        }
        .redlogo img{
            width: 252px;
        }
        .adjust{
            margin-top: 20px;
        }
        #examShowtime{
            color: #fff;
            font-size: 18px;
            font-weight: 500;
        }
        #case li{
            border-radius: 40px;
            border: 1px solid #FCA91F;
            width: 40px;
            height: 40px;
        }
        #case li a{
            display: inline-block;
            width: 100%;
            height: 100%;
            color: #FCA91F;
            font-size: 18px;
            line-height: 40px;
            text-align: center;
        }
        .attributes h1{
            font-size: 30px !important;
        }
        #case li:hover{
            background: #FCA91F;
            border: 1px solid #FCA91F;
        }
        .fastalertedImg {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            background: rgb(0, 0, 0, 0.5);
        }
        .fastalertedImg img {
            width: 400px;
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
        }
        .MinutealertedImg {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            background: rgb(0, 0, 0, 0.5);
        }
        .MinutealertedImg img {
            width: 400px;
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
        }
        .outTemplates {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            background: rgb(0, 0, 0, 0.3);
        }
        .outsba {
            width: 50%;
            height: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            background: rgb(255, 255, 255);
        }
        .outTemplates img{
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
        }
        .outTemplates p {
            position: absolute;
            top: 80%;
            left: 52%;
            translate: -50% -50%;
            font-size: 30px;
            font-weight: bold;
        }
        .unify {
            width: 151px !important;
            height: 55px !important;
        }
        .info, .heading, .around {
            width: 94% !important;
        }
        .slogan {
            width: 100% !important;
            line-height: 78px !important;
        }
        .options, .topic {
            width: 76% !important;
        }
        #examShowtime #lastEndTime {
            margin-left: 0;
        }
    </style>
</head>
<body class="signin" style="overflow-x: hidden">

<div class="infoBox">
    <div class="info">
        <div class="redlogo"><img src="/img/loaintitles.png" style="width: 350px;"></div>
        <div class="attributes">
            <h1 id="roomNumber"></h1>
            <h1 id="seatNumber"></h1>

<!--            <div id="idCard"></div>-->
<!--            <div id="ticketNumber"></div>-->
            <h1 style="margin-top: 5px" id="name"></h1>
<!--            <button style="font-size: 23px" class="btn btn-block" id="next" onclick="reload();"><img style="width: 30px;" src="/img/refresh.png"/>刷新</button>-->
        </div>
    </div>
</div>


<div class="heading">

    <div class="options">
        <p style="font-weight: bold;font-size: 50px" class="slogan"><img style="width: 30px;" src="../../img/energy.png" alt="">幼儿园保教活动分析</p>
    </div>
    <div style="display: none" class="" id="examShowtime"><span style="font-size: 25px;font-weight: bold"><img src="../../img/countDown.png" width="30px"> 本次竞赛剩余</span> <span style="font-size: 38px" id="lastEndTime"></span></div>

</div>

    <div class="around">

        <div class="topic">
<!--            <div class="subjectType">案例分析题部分</div>-->
            <div class="login_panel" style="margin: auto;font-size:20px;height: calc(100vh - 445px)">
                <!--<div>-->
                <!--<div class="mar40">一、单选题（共60题）</div>-->
                <!--</div>-->
                <!--<form id="signupForm">-->
                <!--<input type="hidden" name="stuSignId" id="stuSignId" />-->
                <!--<input type="hidden" name="epaperId" id="epaperId" />-->
                <div id="content" style="margin-top:40px;"></div>

                <div class="adjust">
                    <div class="btnBox">
<!--                        <button class="btn btn-block not-allowed unify" onClick="first();">第一题</button>-->
                        <button class="btn btn-block not-allowed unify gray"  onClick="pre();">上一题</button>
                        <button class="btn btn-block not-allowed unify green" onClick="next();">下一题</button>
<!--                        <button class="btn btn-block unify" onClick="last();">最后一题</button>-->
                    </div>
<!--                    <div class="div-1">-->
<!--                        <input class="btn btn-block not-allowed resetSub" id="sub" onclick="question(this);" value="交卷"/>-->
<!--                    </div>-->
                </div>
                <!--</form>-->
            </div>
        </div>

        <div class="sheet">
<!--            <div class="rt_content_tt">-->
<!--                <h2>答题卡</h2>-->
<!--            </div>-->
<!--            <p class="onenape">案例分析题</p>-->
            <ul id="case"></ul>
        </div>

    </div>

<!--    <div style="margin-top: 40px">-->

<!--        <div class="div-1" id="process" style="text-align: center">-->

<!--        </div>-->

<!--    </div>-->

</div>

<div class="alerted">
    <p class="query">您还有题目没完成！</p>
    <div class="button">
        <span onclick="continuest()">继续考试</span>
        <span onclick="submitDate()">坚持提交</span>
    </div>
</div>
<div class="fastalertedImg" style="display: none">
    <img src="../../img/Fiveminutes.png"/>
    <img onclick="imgClose()" src="../../img/close.png" style="width: 30px;height: 30px;margin-top: -200px;margin-left: 190px">
</div>
<div class="MinutealertedImg" style="display: none">
    <img src="../../img/minute.png"/>
    <img onclick="imgClosemi()" src="../../img/close.png" style="width: 30px;height: 30px;margin-top: -200px;margin-left: 190px">
</div>
<div class="outTemplates" style="display: none">
    <div class="outsba" >
        <img src="../../img/excellent.png"/>
        <p>考试时间到了 ！</p>
    </div>
</div>
<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script src="/js/plugins/validate/jquery.validate.min.js"
        th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
<script src="/js/plugins/validate/messages_zh.min.js" th:src="@{/js/plugins/validate/messages_zh.min.js}"></script>
<script src="/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script type="text/javascript">
    // document.oncontextmenu = new Function("event.returnValue=false");
    // document.onselectstart = new Function("event.returnValue=false");
    //
    // window.addEventListener('beforeunload',function(event){
    //     let e = event || window.event;
    //     e.preventDefault();
    //     if( e ){
    //         e.returnValue = '';
    //         return false;
    //     }
    // })
    //
    // // f5、f12、f11禁用
    // document.onkeydown = function (e) {
    //     var ev = window.event || e;
    //     var code = ev.keyCode || ev.which;
    //     if (code == 116 || 123 || 122 || 115) {
    //         if (ev.preventDefault) {
    //             // ev.preventDefault();
    //         } else {
    //             ev.keyCode = 0;
    //             ev.returnValue = false;
    //         }
    //     }
    //
    //     // if ((window.event.altKey) &&
    //
    //     if ( ((window.event.keyCode == 37) || //屏蔽Alt+方向键←
    //             (window.event.keyCode == 39))) { //屏蔽Alt+方向键→
    //         event.returnValue = false;
    //     }
    //     // if ((event.keyCode == 8) || //屏蔽退格删除键
    //     if (
    //         (event.keyCode == 116) || //屏蔽F5刷新键
    //         (event.ctrlKey && event.keyCode == 82)) { //Ctrl+R
    //         event.keyCode = 0;
    //         event.returnValue = false;
    //     }
    //     if (event.keyCode == 27) {
    //         event.keyCode = 0;
    //         event.returnValue = false;
    //     }
    //     if (event.keyCode == 122) {
    //         event.keyCode = 0;
    //         event.returnValue = false;
    //     } //屏蔽F11
    //     if (event.ctrlKey && event.keyCode == 78) event.returnValue = false; //屏蔽Ctrl+n
    //     if (event.shiftKey && event.keyCode == 121) event.returnValue = false; //屏蔽shift+F10
    //     if (window.event.srcElement.tagName == "A" && window.event.shiftKey)
    //         window.event.returnValue = false; //屏蔽shift加鼠标左键新开一网页
    //     if ((window.event.altKey) && (window.event.keyCode == 115)) { //屏蔽Alt+F4
    //         window.showModelessDialog("about:blank", "", "dialogWidth:1px;dialogheight:1px");
    //         return false;
    //     }
    // };

    var exam = JSON.parse(window.localStorage.getItem("exam"));
    var info = JSON.parse(window.localStorage.getItem("info"));
    var dates = JSON.parse(window.localStorage.getItem("dates"));//
    var dates1 = dates * 60;
    var allowNum = info.allowNum; // 允许三次切屏，超过则提交
    // window.onblur = function() {
    //     var el = document.documentElement;
    //     // 这里的 el 可以是其他的页面元素，这样实现的就是这个元素的全屏，而不是整个页面的全屏
    //     fullScreen(el);
    //     if(allowNum < 1) {
    //         // submit()
    //     }
    //     allowNum--;
    //     // layer.confirm("你已切屏，注意切屏次数过多将会强制交卷！！！", {
    //     //     btn: ['确定', '取消']
    //     // });
    // };
    //
    // window.onclick = document.onclick = function (e) {
    //     var el = document.documentElement;
    //     //这里的 el 可以是其他的页面元素，这样实现的就是这个元素的全屏，而不是整个页面的全屏
    //     fullScreen(el);
    // };



    // 禁用放大手势
    function disableZoomGesture() {
        document.addEventListener('gesturestart', preventDefaultHandler, false);
        document.addEventListener('gesturechange', preventDefaultHandler, false);
        document.addEventListener('gestureend', preventDefaultHandler, false);
    }

    // 启用放大手势
    function enableZoomGesture() {
        document.removeEventListener('gesturestart', preventDefaultHandler, false);
        document.removeEventListener('gesturechange', preventDefaultHandler, false);
        document.removeEventListener('gestureend', preventDefaultHandler, false);
    }

    // 阻止默认事件处理程序
    function preventDefaultHandler(event) {
        event.preventDefault();
    }

    function imgClose () {
        $('.fastalertedImg').hide()
    }

    function imgClosemi () {
        $('.MinutealertedImg').hide()
    }
    function fullScreen(el) {
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||

            el.mozRequestFullScreen || el.msRequestFullScreen;

        if (typeof rfs != "undefined" && rfs) {

            rfs.call(el);

        } else if (typeof window.ActiveXObject != "undefined") {

            //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏

            var wscript = new ActiveXObject("WScript.Shell");

            if (wscript != null) {

                wscript.SendKeys("{F11}");

            }

        }
    }


    //单选 多选 切换
    $(".tap").find('dd').click(function (){
        let idx;
        $(this).addClass('active').siblings().removeClass('active');
        changeCss(idx)
    })

    // $('#sub').attr("title" , "考试时间大于"+dates+"分钟才能交卷！");

    //题目总数
    var allsubject = '';
    var index = 0;
    $(function () {
        // $("#roomNumber").html("考场号：" + info.roomNumber);
        // $("#seatNumber").html("座位号：" + info.seatNumber);
        $("#name").html("二次加密序号：" + info.num2);

        // $("#name").html("姓名：" + info.name);
        $("#idCard").html("考生编号：" + info.idCard);
        $("#ticketNumber").html("准考证号：" + info.ticketNumber);
        //$("#photo").attr("src", info.photo);
        $("#stuSignId").val(info.stuSignId);
        $("#epaperId").val(exam.id);
        //倒计时
        $.ajax({
            type: "POST",
            url: "/jzApi/examinations/getNowDateTime",
            data: {},
            success: function (r) {
                //console.log("map =" , r.data.endTime);
                window.localStorage.setItem("nowDate",r);
                // countDown();
            }
        });
        submit()
        // $('.fastalertedImg').on('click',function () {
        //     $('.fastalertedImg').hide()
        // })
        // $('.MinutealertedImg').on('click',function () {
        //     $('.MinutealertedImg').hide()
        // })
        // $('#lastEndTime').on('DOMSubtreeModified', function(event) {  // 绑定DOMSubtreeModified事件
        //     if(event.target.innerHTML == '00:05:00') {
        //         // layer.msg('考试时间5已到,自动提交试卷');
        //         $('.fastalertedImg').show()
        //     }
        //     if(event.target.innerHTML == '00:01:00') {
        //         // layer.msg('考试时间1已到,自动提交试卷');
        //         $('.MinutealertedImg').show()
        //     }
        // });
        function addZero(i) {
            return i < 10 ? "0" + i : i + "";
        }
        var set;
        function countDown() {

            var nowTime = new Date(window.localStorage.getItem("nowDate").replace(/-/g,"/"));
            window.localStorage.setItem("nowDate",new Date(nowTime.getTime()+1000));
            var info = JSON.parse(window.localStorage.getItem("info"));
            //监督员设置了延时
            if( info.endDate != undefined ){
                var endTime = new Date(info.endDate.replace(/-/g, "/")); //考试结束时间
                //console.log("endTime11",endTime)
            }else{
                var endTime = new Date(JSON.parse(window.localStorage.getItem("intro")).endTime.replace(/-/g, "/")); //考试结束时间
            }
            if( window.localStorage.getItem("endTime") !=undefined ){
                var endTime =new Date(window.localStorage.getItem("endTime").replace(/-/g, "/"));
            }
            var leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
            // var d = parseInt(lefTtime / (24*60*60))
            var h = parseInt(leftTime / (60 * 60) % 24);
            var m = parseInt(leftTime / 60 % 60);
            var s = parseInt(leftTime % 60);
            // d = addZero(d)
            h = addZero(h);
            m = addZero(m);
            s = addZero(s);
            document.querySelector("#lastEndTime").innerHTML = h + ':' + m + ':' +  s ;

            // if (info.name.indexOf("jzwy")!=-1||leftTime <= dates1) {
            //     // $("#sub").attr("disabled", false);
            //     // $("#sub").removeClass("not-allowed");
            // }

            set = setTimeout(countDown, 1000);
            if (leftTime < 0) {
                // $('.fastalertedImg').show()
                // $('.MinutealertedImg').show()
                // $('.outTemplates').show()
                // submit();
                // clearInterval(set);
                return
            }

        }

        getData(0);
        //渲染答题卡选中状态
        $('.mar10').click(function () {
            var that = $(this);
            var examId = that.parents('.titleEaxm').attr('data-id');
            var type = that.parents('.titleEaxm').attr('type');
            /*根据题目ID找到对应答题卡*/
            var cardLi = $('li[data-id=' + examId + ']');
            //多选题
            if (type == 1) {
                var a = true;//控制答题卡是否选中
                var b = false;//判断选项是否选中
                if (!that.find("input").prop('checked')) {
                    that.siblings(".mar10").each(function () {
                        //选择了一个选项则为true
                        if ($(this).find("input").prop('checked')) {
                            b = true
                        }
                    });

                } else {
                    b = true;
                }
                if (a) {
                    if (b) {
                        cardLi.addClass('hasBeenAnswer');
                    } else {

                        cardLi.removeClass('hasBeenAnswer');
                    }
                } else {
                    cardLi.removeClass('hasBeenAnswer');
                }
            }
            else if( type != 4 ){
                if (!cardLi.hasClass('hasBeenAnswer')) {

                    cardLi.addClass('hasBeenAnswer');
                }
            }

            $(this).find('textarea').change(function (e){
                if( e.target.value ){
                    if ( type == 4 ) {
                        if (!cardLi.hasClass('hasBeenAnswer')) {

                            cardLi.addClass('hasBeenAnswer');
                        }
                    }
                }else{
                    cardLi.removeClass('hasBeenAnswer');
                }
            })

        });
        //
        //点击答题卡跳转题目
        $('.anLi').click(function () {

            setTimeout(function() {
                var allVideoElement = document.getElementsByTagName('video') // 获取页面上所有的video对象

                function handlePlay(index) {
                    for (let i = 0; i < allVideoElement.length; i++) {
                        if (i != index) {
                            allVideoElement[i].pause()
                        }
                    }
                }

                if (allVideoElement && allVideoElement.length > 0) {
                    for (let i = 0; i < allVideoElement.length; i++) {
                        allVideoElement[i].addEventListener('play', function () { //播放开始执行的函数
                            //执行开始播放的路平级
                            handlePlay(i)
                        })
                    }
                }
            }, 500);

            $('.anLi').attr('style','').find('a').attr('style','');
            $(this).css({'width':'40px','height':'40px', 'background': '#FCA91F','border':'1px solid  #FCA91F'}).find('a').css('color','#fff');

            // var examId = $(this).attr('data-id');
            // /*选中题目ID*/
            // var cardLi = $('div[data-id=' + examId + ']');
            // /*根据题目ID找到对应答题卡*/
            // cardLi.addClass('contentBoxShow');
            // cardLi.removeClass('contentBoxHide');
            // cardLi.siblings().addClass('contentBoxHide');
            // cardLi.siblings().removeClass('contentBoxShow');


            $(".subjectType").text('案例分析题部分');


            index = $(this).attr('data-index');

            if( index >= exam.questions.length - 1){
                $(".green").css('background','#ccc').attr('disabled',true);
            }else{
                $(".green").css('background','#43BD00').attr('disabled',false);
            }

            if( index <= 0){
                $(".gray").css('background','#ccc').attr('disabled',true);
            }else{
                $(".gray").css('background','#43BD00').attr('disabled',false);
            }

            toGo(index)
        });

        //答案存入缓存
        $("textarea").change(function () {
            let textBox = []
            $('.titleEaxm').each(function (i, res) {
                var that = $(this);
                var che = '';
                var type = that.find("textarea").attr("type");
                //文本框
                if (type == 'text') {
                    if (that.find($('textarea')).val() != '' && that.find($('textarea')).val() != undefined) {
                        textBox.push({
                            id: that.attr("data-id"),
                            value: that.find($('textarea')).val(),
                            type: that.attr('type')
                        });
                    }
                }
            });
            window.localStorage.setItem("textBox", JSON.stringify(textBox));
        });

        //从缓存取出答案、遍历到页面
        var textBox = window.localStorage.getItem("textBox");
        if (null != textBox) {
            var subject = '';
            var textBoxJSON = JSON.parse(textBox);
            //遍历题目
            $('.titleEaxm').each(function () {
                var that = $(this);
                for (var i = 0; i < textBoxJSON.length; i++) {
                    //根据id找到对应题目
                    if (that.attr("data-id") == textBoxJSON[i].id) {
                        if (textBoxJSON[i].value != '') {
                            $('li[data-id=' + textBoxJSON[i].id + ']').addClass('hasBeenAnswer');
                        }
                        // //判断空值
                        if (textBoxJSON[i].value != '' && that.find($('textarea')).val() != undefined) {
                            //遍历多选题答案
                            var valueList = textBoxJSON[i].value;
                            $(this).find('textarea').val(valueList)
                            break;
                        }
                    }
                    //进度显示
                    if (that.find($('input:checked')).val() != undefined) {
                        subject = subject * 1 + 1
                    }
                }
                //题目完成进度
                var process = (subject / allsubject) * 100;
                //未完成题目数量
                window.localStorage.setItem("incomplete", allsubject - subject);
                $("#process").html("共" + allsubject + "道题目，已完成" + process.toFixed(2) + "%");
            })
        } else {
            window.localStorage.setItem("incomplete", allsubject);
        }

    });


    function submitDate(){
        // submit();
    }

    function continuest(){
        $(".alerted").hide();
    }

    function question() {

        var intro = JSON.parse(localStorage.getItem("intro"));
        // 考试开始时间 加半个小时
        var startTime = new Date(intro.startTime).getTime() + (60*30*1000);
        //当前时间
        var thisTime = new Date(window.localStorage.getItem("nowDate").replace(/-/g,"/"));
        //考试结束时间
        var endTime = new Date(intro.endTime).getTime();

        let isTrue = JSON.parse(localStorage.getItem('isTrue'));
        let tBox = [];
        //     let isTrue = true;
        if( isTrue ){

            $('.titleEaxm').each(function (i, res) {
                tBox.push({id: $(res).attr('data-id'), value: $(res).find('.subject').val(), type: $(res).attr("type")});
            })

            tBox.forEach(function (val){
                if( !val.value ){
                    $(".alerted").show();
                    return false;
                }
            })

            // submit();

        }else{
            if( thisTime > startTime ){
                // $(".alerted").show();
                submitDate()
            }else if( endTime - thisTime <= (60*30*1000) ){
                $(".alerted").show();
            }else{

                layer.confirm("考试还未满30分钟,不能交卷", {
                    btn: ['确定', '取消']
                })
            }
        }

    }

    //获取题目数据
    function getData(titleNumber) {
        var a = '<div>';//题目
        var c = '';//切换按钮
        var an = [];//单选答题卡
        var am = [];//多选答题卡
        var as = [];//案例分析答题卡
        allsubject = exam.questions.length;
        $("#process").html("共" + allsubject + "道题目，已完成0%");
        var arr = exam.questions;
        var t;

        // 打乱题目顺序
        // for(var i = 0;i < arr.length; i++){
            // var rand = parseInt(Math.random()*arr.length);
            // t = arr[rand];
            // arr[rand] =arr[i];
            // arr[i] = t;
        // }

        arr.forEach(function (item, index, arr) {
            //渲染答题卡
            if (item.type == 1) {
                am.push(item)
                // am += '<li class="anLi"  data-index="' + index + '" data-id="' + item.id + '"><a href="#">' + (parseInt(index)+1) + '</a></li>';
            }else if (item.type == 4) {
                as.push(item)
            }
            else {
                an.push(item)
                // an += '<li class="anLi"  data-index="' + index + '" data-id="' + item.id + '"><a href="#">' + (parseInt(index)+1) + '</a></li>';
            }
        })

        var convan = [];
        let bs = '', bstr = '', f ;
        as.forEach(function (item, index, arr) {
            //控制题目展示
            if (titleNumber == index) {
                f = 'contentBoxShow box'
            } else {
                f = 'contentBoxHide box'
            }
            //案例分析应用题
            // if (item.type == 4) { //案例应用题
            if (item.resourceType == 0) {
                //写入题目选项
                // bs = '<div class="mar10"><textarea type="text" placeholder="请输入您的回答" class="subject" style="border:1px solid #ccc;width:100%;height:300px;line-height: 20px;font-size: 16px;padding: 10px;border-radius:5px" id="' + item.id + '_' + i + '" name="' + item.id + '" ></textarea>'
                //     + '</div>'
            }

            //图片
            if(item.resourceType == 1){
                bs = `<div class="mar10">
                            <div class="resourceUrlImg"><img src="${item.resourceUrl}" alt=""></div>
<!--                            <textarea type="text" placeholder="请输入您的回答" class="subject" style="border:1px solid #ccc;width:100%;height:300px;line-height: 20px;font-size: 16px;padding: 10px;border-radius:5px" id="${ item.id}_${index}" name="${item.id}" ></textarea>-->
                        </div>`;
            }

            //视频
            if(item.resourceType == 2){
                bs = `<div class="mar10" >
                            <div class="resourceUrlVideo"><video src="${item.resourceUrl}"  controls></video></div>
<!--                            <textarea type="text" placeholder="请输入您的回答" class="subject" style="border:1px solid #ccc;width:100%;height:300px;line-height: 20px;font-size: 16px;padding: 10px;border-radius:5px" id="${ item.id}_${index}" name="${item.id}" ></textarea>-->
                        </div>`;
            }

            // <span className='serial'>${(parseInt((index)) + 1)}</span>
            bstr += `<div type="${item.type}" class="${f} titleEaxm" data-id="${item.id}" data-index="${(convan.length + index)}"><div><span style="font-weight: bold;font-size: 30px;" class='bold' >  ${item.introduce }</span></div>${ bs }</div>`;
                // else if (item.resourceType == 1) {
                //     //写入题目选项
                //     for (var i = 0; i < list.length; i++) {
                //         b += '<div class="mar10"><input type="text" class="subject" id="' + item.id + '_' + i + '" name="' + item.id + '"  value="" />'
                //             + '</div>'
                //     }
                //     a += '<div type="' + item.type + '" class="' + f + ' titleEaxm" data-id="' + item.id + '" data-index="' + index + '"><div>' + "<span class='serial'>" + (parseInt(index)+1) + "</span>" + "<span class='bold'>" +'（案例分析题）（' + item.score + '分）&nbsp;' + item.introduce+ "</span>" + '<img style="width: 500px;height: auto;" src="'+item.resourceUrl+'">' +'</img>'+  '</div>' + b;
                //
                // }
            // }

        })

        // return false;
        a += bstr;
        $("#content").html(a);

        var str = '';

        as.map(function (item, index) {
            if( index == 0 ){
                str += '<li class="anLi" style="width: 40px;height: 40px;background: #FCA91F; border: 1px solid  #FCA91F;" data-type=" ' + item.type + '"  data-index="' + (parseInt(an.length + am.length + index)) + '" data-id="' + item.id + '"><a href="#" style="color: #fff">' + (parseInt(an.length + am.length + index) + 1) + '</a></li>';
            }else {
                str += '<li class="anLi"  data-type=" ' + item.type + '"  data-index="' + (parseInt(an.length + am.length + index)) + '" data-id="' + item.id + '"><a href="#">' + (parseInt(an.length + am.length + index) + 1) + '</a></li>';
            }
        })

        $("#case").html(str)  //答题卡
        var allVideoElement = document.getElementsByTagName('video') // 获取页面上所有的video对象
        let allvideoList = [...allVideoElement]
        allvideoList?.forEach(function(videoElement) {
            // 添加全屏事件监听器
            videoElement.addEventListener('click', function() {
                if (!document.fullscreenElement) {
                    // 进入全屏模式
                    if (videoElement.requestFullscreen) {
                        videoElement.requestFullscreen();
                    } else if (videoElement.mozRequestFullScreen) {
                        videoElement.mozRequestFullScreen();
                    } else if (videoElement.webkitRequestFullscreen) {
                        videoElement.webkitRequestFullscreen();
                    } else if (videoElement.msRequestFullscreen) {
                        videoElement.msRequestFullscreen();
                    }
                } else {
                    // 退出全屏模式
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                        document.webkitExitFullscreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                }
            });
            // 监听全屏改变事件，在进入或退出全屏时执行相应的操作
            document.addEventListener('fullscreenchange', function(event) {
                if (document.fullscreenElement && videoElement === document.fullscreenElement) {
                    // 进入全屏模式时禁用放大手势
                    disableZoomGesture();
                } else {
                    // 退出全屏模式时启用放大手势
                    enableZoomGesture();
                }
            });

        });

    }

    function toGo(index) {
        changeCss(index)
    }

    function first() {
        index = 0;
        $(".gray").css('background','#ccc').attr('disabled',true);
        $(".green").css('background','#43BD00').attr('disabled',false);

        $(".subjectType").text('案例分析题部分');
        changeCss(index)
    }

    function last() {
        index = exam.questions.length - 1;
        $(".gray").css('background','#43BD00').attr('disabled',false);
        $(".green").css('background','#ccc').attr('disabled',true);
        $(".subjectType").text('案例分析题部分');

        changeCss(index)
    }

    function next() {
        index = parseInt(index) + parseInt(1);
        if( index > 0 ){
            $(".gray").css('background','#43BD00').attr('disabled',false);
        }
        if( index >= exam.questions.length ){
            $(".green").css('background','#ccc').attr('disabled',true);
            index = exam.questions.length - 1;
        }else {
            $(".green").css('background','#43BD00');
        }

        changeCss(index)
    }

    function pre() {
        index = parseInt(index) - parseInt(1);
        if( index < exam.questions.length){
            $(".green").css('background','#43BD00').attr('disabled',false);
        }
        if( index <= 0 ){
            $(".gray").css('background','#ccc').attr('disabled',true);
            index = 0;
        }else {
            $(".gray").css('background','#43BD00');
        }

        changeCss(index)
    }
    //刷新考试结束时间
    function reload() {
        $.ajax({
            url: "/jzweb/exceptionAddtime/delayed",
            data: {stuId:JSON.parse(window.localStorage.getItem("info")).stuSignId,eBatchId:JSON.parse(window.localStorage.getItem("intro")).id },
            success: function (r) {
                let info = JSON.parse(window.localStorage.getItem("info"));
                info.endDate = r.data.endTime;
                window.localStorage.setItem('isTrue', JSON.stringify(r.data.isTrue));
                window.localStorage.setItem("endTime",r.data.endTime);
                window.localStorage.setItem("info",JSON.stringify(info));
            }
        });
    }

    //控制题目展示
    function changeCss(index) {

        setTimeout(function() {
            var allVideoElement = document.getElementsByTagName('video') // 获取页面上所有的video对象
            allVideoElement[index].play()
            function handlePlay(index) {
                for (let i = 0; i < allVideoElement.length; i++) {
                    if (i != index) {

                        allVideoElement[i].pause()
                    }
                }
            }

            if (allVideoElement && allVideoElement.length > 0) {
                for (let i = 0; i < allVideoElement.length; i++) {
                    allVideoElement[i].addEventListener('play', function () { //播放开始执行的函数
                        //执行开始播放的路平级
                        handlePlay(i)
                    })
                }
            }
        }, 500);

        $('.box').each(function (i, res) {
            if (index == i) {
                $(this).addClass("contentBoxShow");
                $(this).removeClass("contentBoxHide");
            } else {
                $(this).addClass("contentBoxHide");
                $(this).removeClass("contentBoxShow")
            }
        });

        $(".anLi").attr('style','').find('a').attr('style','');
        $(".anLi").eq(index).css({'background': '#FCA91F', 'border':' 1px solid #FCA91F'}).find('a').css('color','#fff');

    }

    //提交答卷
    function submit( ) {
        console.log('===========')
        var t = Math.round(Math.random());
        // 0-9随机数
        var t = Math.floor(Math.random() * 10);
        console.log(t)
        var textBox = window.localStorage.getItem("textBox");
        // var tolBox = [];
        var textBox = [];
        // var id = layer.msg('提交中，请等待！', {
        //     icon: 16,
        //     shade: 0.4,
        //     time: false //取消自动关闭
        // });

        $('.titleEaxm').each(function (i, res) {
            textBox.push({id: $(res).attr('data-id'), value: $(res).find('.subject').val() ? $(res).find('.subject').val() : '', type: $(res).attr("type")});
        })

        textBox = JSON.stringify(textBox);

        if (!textBox) {
            textBox = [];
            $('.titleEaxm').each(function (i, res) {
                textBox.push({id: $(res).attr('data-id'), value: '', type: $(res).attr("type")});
            })
        }
        // type ==1  现在的题目(应用分析题)
        // type ==2  理论题

        // setTimeout(function () {
            $.ajax({
                type: "POST",
                url:  "/jzApi/examinations/selAnswerSheet",
                data: {
                    stuSignId: info.stuSignId,
                    epaperId: exam.id,
                    answerList: textBox,
                    code: info.cookieCode,
                },
                success: function (r) {
                    //console.log("r",r)
                    if (r.code == 0) {
                        //提交试卷后清除缓存
                        // var name = info.name
                        // var ticketNumber = info.ticketNumber
                        // var idNumber = info.idCard
                        // localStorage.removeItem("info");
                        // localStorage.removeItem("exam");
                        // localStorage.removeItem("intro");
                        // localStorage.removeItem("answerList");
                        // localStorage.removeItem("endTime");
                        // localStorage.removeItem("dates");
                        // localStorage.removeItem("incomplete");
                        // localStorage.removeItem("times");
                        // localStorage.removeItem("endTimes");
                        // localStorage.removeItem("textBox");
                        // localStorage.clear();
                        // location.href = '/examination/endExam?name='+name+'&ticketNumber='+ticketNumber+'&idNumber='+idNumber;
                    } else if(r.code === '-1') {
                        // layer.msg(r.msg);
                        // location.href = '/examination/endExam?name=' + name + '&ticketNumber=' + ticketNumber + '&idNumber=' + idNumber;
                    } else {
                        // layer.msg(r.msg);
                    }
                }
            });
        // }, t * 1000);
    }
</script>
</body>





